<template>
    <div class="page notTab">
        <Header v-if="id"> 修改收货地址 </Header>
        <Header v-else> 增加收货地址 </Header>
        <div class="info">
            <div class="address">
                <div class="line fx">
                    <div class="name">收件人</div>
                    <input
                        type="text"
                        placeholder="收件人"
                        v-model="name"
                        class="fx1"
                    />
                </div>
                <div class="line fx">
                    <div class="name">联系电话</div>
                    <input
                        type="number"
                        placeholder="联系电话"
                        v-model="tel"
                        maxlength="11"
                        class="fx1"
                    />
                </div>
                <div class="line fx">
                    <div class="name">所在地区</div>
                    <div class="fx1 addrPicker">
                        <uni-data-picker
                            style="width: 100%"
                            placeholder="请选择所在地区"
                            popup-title="请选择所在地区"
                            :localdata="dataTree"
                            :map="{ text: 'label', value: 'value' }"
                            v-model="region"
                        >
                        </uni-data-picker>
                    </div>
                </div>
                <div class="line fx">
                    <div class="name">详细地址</div>
                    <input
                        type="text"
                        placeholder="详细地址"
                        v-model="addr"
                        class="fx1"
                    />
                </div>
            </div>
            <div class="button">
                <button
                    class="save fx jcc"
                    :disabled="isDisabled"
                    @click="save"
                >
                    保存地址
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "@/common";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
    data() {
        return {
            region: "",
            regionTxt: "",
            addr: "",
            name: "",
            tel: "",
            isDisabled: false,
            id: "",
            dataTree: regionData,
        };
    },
    components: {},
    watch: {
        region(n, o) {
            let p = n.substring(0, 3) + "000";
            let c = n.substring(0, 4) + "00";
            let d = n;

            $.log(CodeToText[p], CodeToText[c], CodeToText[d]);
            this.regionTxt =
                CodeToText[p] + "-" + CodeToText[c] + "-" + CodeToText[d];
        },
    },
    methods: {
        go: $.go,
        getAddrList() {
            let url = $.user("receiveAddrList");
            $.np(url).then((res) => {
                let list = [];
                res.Id.forEach((ele, ind) => {
                    let item = {};
                    for (let i in res) {
                        item[i] = res[i][ind];
                    }
                    list.push(item);
                });
                this.addrList = list;
                this.setAddrVal();
            });
        },
        setAddrVal() {
            let id = this.id;
            let current = this.addrList.filter((ele) => ele.Id == id)[0];
            this.addr = current.addr;
            this.tel = current.tel;
            this.name = current.name;
            this.regionTxt = current.addr_code;
            $.log(this.regionTxt.split("-")[2]);
            this.region =
                TextToCode[this.regionTxt.split("-")[0]][
                    this.regionTxt.split("-")[1]
                ][this.regionTxt.split("-")[2]].code;
        },
        save() {
            let url = $.user("addReceiveAddr");
            if (!this.name) {
                $.tip("请输入收件人姓名");
                return;
            }
            if (!this.tel) {
                $.tip("请输入联系电话");
                return;
            }
            if (!this.addr) {
                $.tip("请输入详细地址");
                return;
            }

            let data = {
                addr: this.addr,
                name: this.name,
                tel: this.tel,
                addr_code: this.regionTxt,
            };
            this.isDisabled = true;

            //如果是编辑
            if (this.id) {
                url = $.user("updateReceiveAddr");
                data.Id = this.id;
            }

            $.post(url, data).then((res) => {
                if (!res.isError) {
                    $.suc("保存成功");
                    this.back();
                }
                this.isDisabled = false;
            });
        },
    },
    onLoad(o) {
        console.log(regionData);
        this.id = o.id;
        if (this.id) {
            this.getAddrList();
        }
    },
    onUnload() {
        $.isRefresh = true;
    },
};
</script>

<style lang="less" scoped>
.info {
    background: #fff;
}
.address {
    background: #fff;
    margin-top: 20rpx;
    padding: 0 40rpx;
    .line {
        padding: 20rpx 0;
        font-size: 28rpx;

        border-bottom: 1rpx solid #efefef;
        .name {
            color: #666;
            margin-right: 20rpx;
            width: 140rpx;
        }
        input {
            height: 56rpx;
            font-size: 28rpx;
        }
        .picker {
            padding: 10rpx 0;
        }
        .addrPicker {
            position: relative;
            /deep/.input-value-border {
                border: 0;
            }
            /deep/.selected-item-active {
                border-bottom: 2px solid #fd9901;
            }
            /deep/.check {
                border: 2px solid #fd9901;
                border-top: 0;
                border-left: 0;
            }
            /deep/.input-value {
                padding: 0;
            }
            /deep/.selected-list {
                padding: 0;
            }
        }
    }
}

.button {
    margin-top: 20rpx;
    padding: 30rpx 40rpx;
    button {
        height: 90rpx;
        background: linear-gradient(90deg, #ff6a4c, #ff3333);
        box-shadow: 0rpx 5rpx 16rpx 0rpx rgba(255, 57, 54, 0.6);
        border-radius: 10rpx;
        color: #fff;
        font-size: 28rpx;
    }
}
</style>
